<template>
  <div>
    <!-- -->
    <form @submit.prevent="submmitInfo">
        <label for="account">账号：</label>
        <input type="text" v-model="personInfo.account" name="" id="account" >  <br><br>
        <label for="pass">密码：</label>
        <input type="password" name="" id="pass" v-model="personInfo.password">   <br><br>

        年龄：<input type="number" name=""  v-model.number="personInfo.age"> <br><br>

        性别： <input type="radio" name="sex" v-model="personInfo.gender" value="male">男
               <input type="radio" name="sex" v-model="personInfo.gender" value="famale">女  <br><br>
        爱好：<input type="checkbox" name="" v-model="personInfo.hobby" value="sing">唱歌
             <input type="checkbox" name="" v-model="personInfo.hobby"  value="dance">跳舞
             <input type="checkbox" name="" v-model="personInfo.hobby" value="basketball">篮球 <br><br>

        所属地区：<select  v-model="personInfo.area">  
             <option disabled selected value="0">请选择一个选项</option>
            <option value="1" >兰州</option>
            <option value="2">西藏</option>
            <option value="3">陕西</option>
        </select> <br><br>
        其它信息: <textarea name="" v-model="personInfo.otherMes"  cols="30" rows="5"></textarea>  <br><br>
         
         <input type="checkbox" name="agree" v-model="personInfo.agree" >阅读并接受<a href="">《用户协议》</a>
            <button>提交</button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'FormTest',

  data() {
    return {
      personInfo:{
        account:"",
        password:"",
        age:"",
        gender:"",
        hobby:[],
        area:0,
        otherMes:"",
        agree:false
      }
    };
  },

  mounted() {
    
  },

  methods: {
    submmitInfo(){
        console.log(JSON.stringify(this.personInfo));
    }
  },
};
</script>